<template>
  <div class="transQuery_main">
    <a-form ref="form">
      <div>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item required label="起始SN设备号" v-bind="formItemLayout">
              <a-input v-model="query.beginSnCode" placeholder="起始SN设备号" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item required label="结束SN设备号" v-bind="formItemLayout">
              <a-input v-model="query.endSnCode" placeholder="结束SN设备号" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16"></a-row>
        <h3>活动规则</h3>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item required label="活动名称" v-bind="formItemLayout">
              <a-input v-model="query.name" placeholder="活动名称" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="16">
          <a-col :span="12">
            <a-form-item required label="活动周期开始" v-bind="formItemLayout">
              <a-date-picker
                :disabledDate="disabledDateLi"
                v-model="beginDate"
                style="width:100%;"
                :showToday="false"
                placeholder="活动开始时间"
                format="YYYYMMDD"
                @change="beginDateChange"
                :allowClear="isClear"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item required label="活动周期结束" v-bind="formItemLayout">
              <a-date-picker
                :disabledDate="disabledDateLi"
                 v-model="endDate"
                style="width:100%;"
                placeholder="活动结束时间"
                format="YYYYMMDD"
                :showToday="false"
                @change="endDateChange"
                :allowClear="isClear"
              />
            </a-form-item>
          </a-col>
        </a-row>
      </div>
      <a-row>
        <a-col :span="24">
          <a-form-item
            required
            label="自首笔交易之日起"
            :label-col="{ span: 4}"
            :wrapper-col="{ span: 19,offset:1 }"
          >
            <a-input-number
              v-model="query.transTargetRequest.endDay"
              :min="0"
              :max="365"
              :step="1"
              :formatter="value => Math.round(value)"
            />&ensp; 天内，交易量累计达到&ensp;
            交易量累计达到&ensp;
            <a-input-number
              v-model="query.transTargetRequest.targetAmount"
              :min="0"
              :step="1"
              :formatter="value => Math.round(value)"
            />&ensp; 元
            ，返现&ensp;
            <a-input-number
              v-model="query.transTargetRequest.rewardAmount"
              :min="0"
              :step="1"
              :formatter="value => Math.round(value)"
            />&ensp; 元
          </a-form-item>
        </a-col>
      </a-row>
      <p>注：首笔交易必须在活动周期内完成</p>
      <a-row style="margin-bottom: 20px;text-align: center;">
        <a-button style="width:140px;" type="primary" :loading="loading" @click="addNewActivity">提交</a-button>
      </a-row>
    </a-form>

    <!-- <h3>历史配置记录</h3> -->

    <!-- <a-table
      size="middle"
      :columns="columns"
      :dataSource="list"
      :pagination="false"
      :rowKey="record => record.subjectId"
    >
      <span slot="transTime" slot-scope="record">{{record.transTime | timeFilter}}</span>
      <span slot="amount" slot-scope="record">{{(record.amount/100).toFixed(2)}}</span>
      <span slot="action" slot-scope="record">
        <span @click="showVisible(record.subjectId)" style="color:#1890ff;margin-right:15px;">活动规则</span>
        <span
          @click="goSnRevoke(record.startCode,record.endCode,record.subjectId)"
          style="color:#1890ff;margin-right:15px;"
        >SN设备号撤销</span>
        <span @click="goDetail(record.subjectId)" style="color:#1890ff;margin-right:15px;">撤销记录</span>
      </span>
    </a-table>
    <a-pagination
      @change="onPageChange"
      :current="pagination.current"
      :total="pagination.total"
      :pageSize="configData.pageSize"
      style="margin-top: 20px"
    />

    <a-modal
      @ok="handleOk"
      @cancel="handleCancel"
      v-model="visible"
      title="活动规则"
      width="600px"
      :footer="null"
      :maskClosable="false"
      centered
    >
      <h5>活动规则</h5>
      <a-form>
        <a-row :gutter="8">
          <a-col :span="24">
            <a-form-item
              class="formItem"
              label="活动名称"
              :label-col="{ span: 6}"
              :wrapper-col="{ span: 15,offset:1 }"
            >
              <span>{{queryDetail.name}}</span>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item
              class="formItem"
              label="活动周期开始"
              :label-col="{ span: 6}"
              :wrapper-col="{ span: 15,offset:1 }"
            >
              <span>{{queryDetail.beginDate | dateFilter}}</span>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item
              class="formItem"
              label="活动周期结束"
              :label-col="{ span: 6}"
              :wrapper-col="{ span: 15,offset:1 }"
            >
              <a-date-picker
                style="width:80%;"
                :disabled="disabledDate"
                :disabledDate="disabledDateLi"
                placeholder="交易时间"
                format="YYYYMMDD"
                @change="endChange"
                v-model="momentDate"
                :allowClear="isClear"
              />
              <a-button style="margin-left: 10px;" type="primary" @click="modifyDate">修改</a-button>
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item
              class="formItem"
              label="自首笔交易之日起"
              :label-col="{ span: 6}"
              :wrapper-col="{ span: 15,offset:1 }"
            >
              <div
                v-for="(item,index) in queryDetail.transTargetList"
                :key="index"
              >{{item.endDay}}天内，交易量累计{{item.typeName}}{{item.targetAmount}}元，返现{{item.rewardAmount}}元</div>
              <span></span>
            </a-form-item>
          </a-col>
        </a-row>
        <h5 style="margin-top:15px;">当前状态</h5>
        <p>{{queryDetail.statusName}}</p>
        <div style="text-align: center;margin-top: 25px;">
          <a-button type="primary" style="width:100px;" @click="toSubmit">提交</a-button>
        </div>
      </a-form>
    </a-modal>-->
  </div>
</template>

<script>
import AForm from "ant-design-vue/es/form/Form";
import ATabs from "ant-design-vue/es/tabs";
import AFormItem from "ant-design-vue/es/form/FormItem";
import AInput from "ant-design-vue/es/input/Input";
import AIcon from "ant-design-vue/es/icon";
import AInputGroup from "ant-design-vue/es/input/Group";
import AButton from "ant-design-vue/es/button/button";
import ACol from "ant-design-vue/es/grid/Col";
import ARow from "ant-design-vue/es/grid/Row";
import Modal from "ant-design-vue/es/modal";
import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
import AAlert from "ant-design-vue/es/alert/index";
import moment from "moment";
import api from "@/common/api";
const ATabPane = ATabs.TabPane;

const columns = [
  {
    title: "批次号",
    dataIndex: "batchNo",
    width: "15%",
    // width: "300",
    align: "center"
    // fixed: "left"
  },
  {
    title: "操作时间",
    // scopedSlots: { customRender: "transTime" },
    dataIndex: "ctime",
    width: "15%",
    align: "center"
  },
  {
    title: "起始SN设备号",
    dataIndex: "startCode",
    width: "12%",
    align: "center"
  },
  {
    title: "结束SN设备号",
    dataIndex: "endCode",
    // scopedSlots: { customRender: "endSnCode" },
    width: "13%",
    align: "center"
  },
  {
    title: "合计数量",
    dataIndex: "nums",
    width: "5%",
    align: "center"
  },
  {
    title: "活动名称",
    dataIndex: "subjectName",
    width: "15%",
    align: "center"
  },
  {
    title: "操作",
    scopedSlots: { customRender: "action" },
    // width: "250",
    align: "center"
    // fixed: "right"
  }
];

export default {
  name: "customActivity",
  components: {
    AAlert,
    ACheckbox,
    ACol,
    ARow,
    AButton,
    AInputGroup,
    AIcon,
    AInput,
    AFormItem,
    ATabPane,
    ATabs,
    AForm
  },

  data() {
    return {
      today: new Date(),
      columns,
      isClear: false,
      momentDate: moment(new Date()),
      excelurl: "",
      disabledDate: true,
      endDateModify: "",
      // endDate: moment(new Date()),
      // beginDate: moment(new Date()),
      endDate: null,
      beginDate: null,
      query: {
        name: null,
        beginDate: null,
        endDate: null,
        transTargetRequest: {
          endDay: null,
          targetAmount: null,
          rewardAmount: null
        },
        beginSnCode: null,
        endSnCode: null
      },
      configData: {
        data: "",
        page: 1,
        pageSize: 10
      },
      queryDetail: {
        name: "",
        beginDate: "",
        endDate: ""
      },
      pagination: { current: null, total: null },
      visible: false,
      form: this.$form.createForm(this),
      error: "",
      loginpwd: "",
      loginpwd2: "",
      login: false,
      list: [],
      count: null,
      payedCount: null,
      totalAmount: null,
      loading: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 12, offset: 1 },
          md: { span: 12, offset: 1 }
        }
      }
    };
  },
  watch: {},
  filters: {
    timeFilter: function(value) {
      if (value) {
        let year = value.substring(0, 2);
        let mouth = value.substring(2, 4);
        let day = value.substring(4, 6);
        return year + ":" + mouth + ":" + day;
      }
    },
    dateFilter: function(value) {
      if (value) {
        let year = value.substring(0, 4);
        let mouth = value.substring(4, 6);
        let day = value.substring(6, 8);
        return year + "-" + mouth + "-" + day;
      }
    }
  },
  computed: {},
  created() {},

  mounted() {
    // this.handleSearch();
    // this.transTypeQuery();
  },
  activated() {},
  methods: {
    moment,
    modifyDate() {
      this.disabledDate = false;
    },
    //日期不可选
    disabledDateLi(current) {
      // return current > moment().endOf('day');
      return current < moment().subtract(0, "day");
    },
    // 初始化时间
    initDate() {
      var date = new Date();
      var month = date.getMonth();
      var dates = date.getDate();
      if (date.getMonth() < 9) {
        month = "0" + parseInt(month + 1);
      } else {
        month = month + 1;
      }
      if (date.getDate() <= 9) {
        dates = "0" + date.getDate();
      }
      this.query.data.transDate = date.getFullYear() + "" + month + "" + dates;
    },
    onPageChange: function(page, pageSize) {
      console.info(page, pageSize);
      this.configData.page = page;
      this.configData.pageSize = pageSize;
      this.handleSearch();
    },
    endChange(dates, dateStrings) {
      // this.query.data.transDate = null;
      this.endDateModify = dateStrings;
    },
    beginDateChange(dates, dateStrings) {
      // this.query.data.transDate = null;
      this.query.beginDate = dateStrings;
    },
    endDateChange(dates, dateStrings) {
      // this.query.data.transDate = null;
      this.query.endDate = dateStrings;
    },
    // 清空表单
    colseForm() {
      this.query = {
        name: null,
        beginDate: null,
        endDate: null,
        transTargetRequest: {
          endDay: null,
          targetAmount: null,
          rewardAmount: null
        },
        beginSnCode: null,
        endSnCode: null,
      };
       this.beginDate = ""
       this.endDate = ""
    },
    addNewActivity() {
      
      
      if (
        !this.query.name ||
        !this.query.beginDate ||
        !this.query.endDate ||
        !this.query.beginSnCode ||
        !this.query.endSnCode ||
        !this.query.transTargetRequest.endDay ||
        !this.query.transTargetRequest.targetAmount ||
        !this.query.transTargetRequest.rewardAmount
      ) {
        this.$message.warning("请填写相关内容！");
        return false;
      }
      this.loading = true;
      console.info(this.query);
      api.addNewActivity(
        this.query,
        res => {
          this.loading = false;
          console.info(res);
          if (res.code == "OK") {
            // this.handleSearch();
            this.$message.success(res.message);
            this.colseForm();
            this.$router.push("/marketing/ActivityQuery");
          } else {
            this.$message.error(res.message);
            return false;
          }
        },
        err => {
          console.log("err", err);
          if (err) {
            this.loading = false;
          }
        }
      );
    },
    handleSearch() {
      // this.loading = true;
      console.info(this.configData);
      api.configLogList(
        this.configData,
        res => {
          console.info(res);
          if (res.code == "OK") {
            this.loading = false;
            this.list = res.list;
            this.pagination.current = res.current;
            this.pagination.total = res.total;
          } else {
            this.loading = false;
            // this.$message.info(res.message)
            this.list = [];
            this.pagination.current = 1;
            this.pagination.total = 1;
            return false;
          }
        },
        err => {
          console.log("err", err);
          if (err) {
            this.loading = false;
          }
        }
      );
    },
    goDetail(id) {
      console.log(id);
      this.$router.push(`/marketing/snRevokeDetail/${id}`);
    },
    goSnRevoke(begin, end, id) {
      console.log(begin);
      console.log(end);
      this.$router.push(`/marketing/snRevoke/${begin}/${end}/${id}`);
    },
    handleOk(e) {
      setTimeout(() => {
        this.visible = false;
      }, 2000);
    },
    handleCancel(e) {
      this.visible = false;
    },
    showVisible(id) {
      this.getQueryDetail(id);
      this.visible = true;
      this.disabledDate = true;
    },
    getQueryDetail(id) {
      api.getSubListDetail(
        id,
        res => {
          console.log(res);
          if (res.code == "OK") {
            this.queryDetail = res.data;
            this.momentDate = moment(res.data.endDate);
            // 处理交易量数据
            // this.queryDetail.transTargetList.forEach((item, index) => {
            //   if (item.type == "achieve") {
            //     this.addUpList.push(item);
            //   } else if (item.type == "un_achieve") {
            //     this.DeductionList.push(item);
            //   }
            // });
          }
        },
        err => {}
      );
    },
    toSubmit() {
      if (this.endDateModify == "") {
        this.$message.warning("请修改结束时间！");
        return false;
      }
      let data = {
        id: this.queryDetail.id,
        endDate: this.endDateModify
      };
      api.dateModify(
        data,
        res => {
          console.log("res", res);
          if (res.code == "OK") {
            this.$message.success("提交成功！");
            this.visible = false;
            Modal.destroyAll();
          }
        },
        err => {}
      );
    }
  }
};
</script>

<style lang="less" scoped>
span {
  cursor: pointer;
}

span {
  cursor: pointer;
}

.formItem {
  margin-bottom: 5px;
}

h5 {
  font-size: 15px;
}

.formGroupTitle {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
}

.ant-tabs-nav {
  float: right;
}

.amountColor {
  color: #29a576;
  font-weight: 400;
}

.amountSize {
  font-size: 20px;
  padding: 0 5px;
}

.expand {
  display: flex;
  align-items: center;
  justify-content: center;
}

.transQuery_main {
  /* padding: 30px 40px; */
  padding: 70px;
  height: 100%;
  overflow-y: auto;
}

.button_sty {
  width: 100%;
}
</style>